<template lang="pug">
.flex.as.jc
  .flex.dc.x1(v-for="item in src", @click="_.isFunction(click) && click(item)", v-bind:class="{pointer: _.isFunction(click)}", track-by="$index")
    .flex.ac.jc
      i.circle.icon(v-bind:class="{ check: item.at, gray: !item.at }")
      .line.gray-bg(v-bind:class="{ transparent: $index===src.length-1 }")
    span {{_.isFunction(formatter) ? formatter(item) : item.name}}
    span {{item.at| unixToDate 'YYYY-MM-DD, HH:mm'}}
</template>

<script>
export default {
  name: 'step',
  props: ['src', 'click', 'formatter'],
}
</script>

<style lang="sass" scoped>
span
  margin: 5px 0 0 0
</style>
